<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"> </script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"> </script>
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="16" :offset="8">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                      <el-input placeholder="按照车牌号搜索" v-model="param.numbers"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="queryParkingBtnInfo">查询</el-button>
                    </el-form-item>
                  </el-form>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-button type="primary" @click="addParkingForm=true">添加</el-button>
                <el-button type="danger" @click="batchDelParking">批量删除</el-button>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <template>
                    <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">

                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>

                    <el-table-column
                      prop="numbers"
                      label="车牌号"
                      >  
                    </el-table-column>

                    <el-table-column
                      prop="status"
                      label="状态"
                      >
                      <template slot-scope="scope">
                        <span v-if="scope.row.status==1" style="color: green;">已绑定</span>
                        <span v-else style="color: rgb(224, 99, 99);">未绑定</span>
                      </template>
                    </el-table-column>

                    <el-table-column
                      prop="ownerId"
                      label="业主ID"
                      >
                    </el-table-column>

                    <el-table-column
                    prop="remarks"
                    label="备注"
                    >
                    </el-table-column>

                    
                    <el-table-column
                    prop="Operate"
                    label="操作"
                    >
                    <template slot-scope="scope">
                        <el-button size="mini" @click="updataParkingBtn(scope.row.id)">修改</el-button>
                        <el-button size="mini" @click="delParkingBtn(scope.row.id)">删除</el-button>
                      </template>
                  </el-table-column>
                  </el-table>
                  </template>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">    
                <el-pagination
                background
                :page-sizes="[3, 5, 10, 30]"
                :page-size="pageSize"
                :current-page="pageNum"
                layout="prev, pager, next,total,sizes"
                :total="total"
                @next-click="nextPage"
                @prev-click="prevPage"
                @current-change="changePage"
                @size-change="changeSize">
                </el-pagination>
            </el-col>
        </el-row>

        <!--     新增的弹窗开始-->
        <el-dialog title="添加车位信息" :visible.sync="addParkingForm">
            <el-form>
                <el-form-item label="车牌号" label-width="80px">
                    <el-input v-model="addParkingInfo.numbers"></el-input>
                </el-form-item>


                <el-form-item label="状态" label-width="80px">
                    <el-input v-model="addParkingInfo.status"></el-input>
                </el-form-item>

                <el-form-item label="业主ID" label-width="80px">
                    <el-input v-model="addParkingInfo.ownerId"></el-input>
                </el-form-item>

                <el-form-item label="备注" label-width="80px">
                    <el-input type="textarea" v-model="addParkingInfo.remarks"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addParkingForm=false">取 消</el-button>
                <el-button @click="saveAddParking">确 定</el-button>
            </div>
        </el-dialog>
        <!--     新增的弹窗结束-->

        <!--     修改的弹窗开始-->
        <el-dialog title="添加车位信息" :visible.sync="updateParkingForm">
            <el-form>
                <el-form-item label="车牌号" label-width="80px">
                    <el-input v-model="updataParkingInfo.numbers"></el-input>
                </el-form-item>


                <el-form-item label="状态" label-width="80px">
                    <el-input v-model="updataParkingInfo.status"></el-input>
                </el-form-item>

                <el-form-item label="业主ID" label-width="80px">
                    <el-input v-model="updataParkingInfo.ownerId"></el-input>
                </el-form-item>

                <el-form-item label="备注" label-width="80px">
                    <el-input type="textarea" v-model="updataParkingInfo.remarks"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateParkingForm=false">取 消</el-button>
                <el-button @click="saveUpdateParking">确 定</el-button>
            </div>
        </el-dialog>
        <!--     修改的弹窗开始-->

    </div>


    <script>
        new Vue({
            el:'#app',
            data:{
                tableData:[
                    {
                        numbers:'鄂A52000',
                        status:0,
                        ownerId:10,
                        remarks:'无无无'
                    }
                ],
                param:{

                },
                pageNum:1,
                pageSize:5,
                total:0,
                addParkingForm:false,
                updateParkingForm:false,
                addParkingInfo:{},
                updataParkingInfo:{},
                selectData:[],
            },
            methods:{
                queryParkingBtn(){
                    let pageData={}
                    pageData.pageNum=this.pageNum
                    pageData.pageSize=this.pageSize
                    pageData.param=this.param
                    axios.post('/parking/queryParking',pageData).then(resp=>{
                        // console.log(resp.data)
                        this.tableData=resp.data.data.list
                        this.total=resp.data.data.total
                    })
                },

                saveAddParking(){
                    axios.post("/parking/saveAddParking",this.addParkingInfo).then(resp=>{
                        if(resp.data.code==200){
                            this.addParkingForm=false
                            this.$message({
                                showClose: true,
                                message: '恭喜你，添加成功',
                                type: 'success'
                            });
                            this.queryParkingBtn()
                        }
                    })
                },

                updataParkingBtn(id){
                    axios.get('/parking/updataParkingBtn/'+id).then(resp=>{
                        this.updateParkingForm=true
                        if(resp.data.code==200){
                        this.updataParkingInfo=resp.data.data
                        }
                    })
                },
                saveUpdateParking(){
                    axios.post('/parking/saveUpdateParking',this.updataParkingInfo).then(resp=>{
                        if(resp.data.code==200){
                            this.updateParkingForm=false
                            this.$message({
                                showClose: true,
                                message: '恭喜你，更改成功',
                                type: 'success'
                            });
                            this.queryParkingBtn()
                        }
                    })
                },
                handleSelectionChange(val){
                    this.selectData=val
                },
                batchDelParking(){
                    //批量删除
                    this.$confirm('是否继续删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //发送删除请求
                        // 怎么得到选中的id数组
                        let ids=[]
                        this.selectData.forEach(e=>{
                            ids.push(e.id)
                        })
                        axios.post('/parking/batchDelParking',ids).then(resp=>{
                            if(resp.data.code==200){
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.queryParkingBtnInfo()
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

                },

                delParkingBtn(id){
                    this.$confirm('是否继续删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.get('/parking/delParkingBtn/'+id).then(resp=>{
                            if(resp.data.code==200){
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.queryParkingBtnInfo()
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },

                //下一页方法
                nextPage(val){
                    //回调参数val,val等于当前页码
                    this.pageNum=val
                    this.queryParkingBtn()
                },
                //上一页方法
                prevPage(val){
                    //回调参数val,val等于当前页码
                    this.pageNum=val
                    this.queryParkingBtn()
                },
                changePage(val){
                    this.pageNum=val
                    this.queryParkingBtn()
                },
                changeSize(val){
                    this.pageSize=val
                    this.queryParkingBtnInfo()
                },
                queryParkingBtnInfo(){
                    this.pageNum=1
                    this.queryParkingBtn()
                },
            },

            created(){
                this.queryParkingBtnInfo()
            }
        })
    </script>
</body>
</html>